<template>
    <v-dialog v-model="editdialog" scrollable persistent max-width="85%" :fullscreen="$vuetify.breakpoint.xsOnly">
      <v-card>
        <v-card-title>
          <span class="headline">{{ name }}</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <v-container grid-list-md>
            <v-form v-model="valid"  ref="edithostform">
            <v-layout wrap>
              <v-flex xs12 sm6 md3>
                <v-text-field label="主机名称" v-model="fields.hostname" :rules="hostnameRules"  required></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="主机IP" v-model="fields.ip" :rules="ipRules" :error-messages="msg.ip" required></v-text-field>
              </v-flex>

              <v-flex xs12 sm6 md3>
                <v-autocomplete :items="type.items" v-model="fields.asset_type" item-text="text" :rules="typeRules" item-value="value" label="设备类型" autocomplete ></v-autocomplete>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-autocomplete :items="status.items" v-model="fields.status" item-text="text" item-value="value" label="主机状态" autocomplete ></v-autocomplete>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="操作系统" v-model="fields.os"></v-text-field>
              </v-flex>
               <v-flex xs12 sm6 md3>
                <v-text-field label="系统版本" v-model="fields.osrelease"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="内核" v-model="fields.kernel"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="内核版本" v-model="fields.kernelrelease"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="SN号 码" v-model="fields.serialnumber"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="厂商名" v-model="fields.manufacturer"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="CPU型号" v-model="fields.cpu_model"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="CPU数量" type="number" v-model="fields.num_cpus"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="内存" type="number" v-model="fields.mem_total"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="MAC地址" v-model="fields.mac"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="磁盘" v-model="fields.disks"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="UUID" v-model="fields.uuid" :rules="uuidRules" :error-messages="msg.uuid" required></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <data-picker :title="'过期日期'" :ui="'menu'" :date="fields.terminal_time" @upDate="tDateValue"/>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="server_id" v-model="fields.server_id"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="ilo IP" v-model="fields.ilo_ip" :error-messages="msg.ilo_ip"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="VIP" v-model="fields.vip" :error-messages="msg.vip"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="快速服务代码" v-model="fields.escode"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="机房编号" v-model="fields.housecode"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="磁盘总容量" type="number" v-model="fields.disk"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="上联端口" v-model="fields.uplink"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="固定资产编号" v-model="fields.asset_no"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="所在位置" v-model="fields.position"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-text-field label="备注" v-model="fields.memo"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md3>
                <v-autocomplete :items="re_per.items" v-model="fields.re_per" item-text="text" item-value="value" label="负责人" autocomplete ></v-autocomplete>
              </v-flex>

            </v-layout>
            </v-form>
          </v-container>
          <small>*必填</small>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" @click.native="closeEditHost()" small><h4>关闭</h4></v-btn>
          <v-btn color="warning" @click.native="editHost($refs.edithostform)" small><h4>保存</h4></v-btn>
          <v-btn color="error" @click.native="deleteHost()" small><h4>删除</h4></v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('edithost')
export default {
  name: 'edithost',
  data: function () {
    return this.$store.state.edithost
  },
  methods: {
    ...mapActions({
      editHost: 'editHost',
      deleteHost: 'deleteHost',
      closeEditHost: 'closeEditHost',
      loadEditHost: 'loadEditHost'
    }),
    tDateValue (date) {
      this.fields.terminal_time = date
    }
  },
  props: {
    editdialog: {
      type: Boolean,
      default: null
    },
    id: {
      type: Number,
      default: null
    }
  },
  watch: {
    editdialog () {
      this.$refs.edithostform.reset()
      this.fields = {}
      let msg = this.msg
      for (var i in msg) {
        msg[i] = ''
      }
      if (this.editdialog) {
        this.loadEditHost(this.id)
      } else {
        this.$store.dispatch('listhost/handlerHost')
      }
    }
  },
  components: {
    'data-picker': () => import('../../components/dateTimePicker/dataPicker')
  }
}
</script>
